page {
  width: 100%;
}
#wrapper {
  height: 100vmax;
  background-color: orange;
  padding: 0.1px;
  position: relative;
}
.page {
  width: 100%;
  height: 100vmax;
  position: absolute;
  top: 0;
  left: 100%;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  
  &.top_fade_in {
    animation-name: top_fade_in;
  }

  @keyframes top_fade_in {
    0% {
      left: 100%;
    }
    100% {
      left: 0;
    }
  }
  
  &.top_fade_out {
    animation-name: top_fade_out;
  }
    @keyframes top_fade_out {
      0% {
        left: 0;
      }
  
      100% {
        left: 100%;
      }
    }
  &.ls_fade_in {
    animation-name: ls_fade_in;
  }
  @keyframes ls_fade_in {
    0% {
      left: -100%;
    }
    100% {
      left: 0;
    }
  }
  &.ls_fade_out {
    animation-name: ls_fade_out;
  }
  @keyframes ls_fade_out {
    0% {
      left: 0;
    }
    100% {
      left: -100%;
    }
  }
}